<template>
    <div class="hot">
        <form action="/">
            <van-search v-model="value" show-action placeholder="小米" @search="onSearch(value)" @cancel="onCancel" />
        </form>
        <!-- <searchTop :msg='value'></searchTop> -->

        <span>热门搜索</span><br />
        <van-row gutter="">
            <van-col span="" v-for="(v, index) in hotword" :key="index" @click="fun(v.keyword)">{{ v.keyword }}</van-col>
        </van-row>
    </div>
</template>

<script>
import service from '../../../request/service'
// import searchTop from '../public/searchTop.vue'
export default {
    // components:{
    //     searchTop
    // },
    data() {
        return {
            hotword: [],
            value: '',
        };
    },
    mounted() {
        service({
            url: "/api/pro/hotword",
            method: "get",
        }).then((res) => {
            this.hotword = res.data.data
        });
    },
    methods: {
    onSearch(val) {
    //   Toast(val);
        this.$router.push({path:'./searchresult',query:{key:val}})
    },
    onCancel() {
        this.$router.push('./home')
    },
    fun(keyword){
        this.value = keyword
    }
  },
};
</script>

<style scoped>
span {
    color: #999;
}

.hot {
    margin-left: 0.7125rem;
}

.van-col {
    border: 1px solid #999;
    margin: 0.3125rem 0.425rem;
    padding: 0.1875rem 0.3125rem;
    border-radius:.375rem;
    color:#999;
}

.van-col:first-child {
    border: 1px solid red;
    color: red;
}
</style>